<template>
  <div class="layui-form layui-form-pane layui-tab-item layui-show">
    <validation-observer ref="observer" v-slot="{ validate }">
      <!-- 邮箱 -->
      <div class="layui-form-item">
        <validation-provider name="email" rules="required||email" v-slot="{errors}">
          <label for="L_email" class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <el-input v-model="username" :disabled="true" id="L_email" name="email"></el-input>
          </div>
        </validation-provider>
      </div>
      <!-- 昵称 -->
      <div class="layui-form-item">
        <validation-provider name="name" rules="required" v-slot="{errors}">
          <label for="L_username" class="layui-form-label">昵称</label>
          <div class="layui-input-inline">
            <input v-model="name" type="text" id="L_username" name="name" class="layui-input" />
          </div>
          <div class="layui-form-mid">
            <span style="color: #c00">{{ errors[0] }}</span>
          </div>
        </validation-provider>
      </div>
      <div class="layui-form-item">
        <label for="L_city" class="layui-form-label">城市</label>
        <div class="layui-input-inline">
          <input v-model="location" type="text" id="L_city" name="city" class="layui-input" />
        </div>
      </div>
      <!-- 性别 -->
      <div class="layui-form-item">
        <label for="L_gender" class="layui-form-label mr1">性别</label>
        <div class="layui-input-inline gray mt1 m11">
          <label for="gender1" class="mr1">
            <input id="gender1" v-model="gender" value="0" title="男" type="radio" name="sex" />
            <i class="layui-icon layui-icon-circle" :class="{'layui-icon-radio': gender === '0'}"></i>
            男
          </label>
          <label for="gender2">
            <input id="gender2" v-model="gender" value="1" title="女" type="radio" name="sex" />
            <i class="layui-icon layui-icon-circle" :class="{'layui-icon-radio': gender === '1'}"></i>
            女
          </label>
        </div>
      </div>
      <!-- 签名 -->
      <div class="layui-form-item layui-form-text">
        <label for="L_sign" class="layui-form-label">签名</label>
        <div class="layui-input-block">
          <textarea
            placeholder="随便写些什么刷下存在感"
            id="L_sign"
            v-model="regmark"
            class="layui-textarea"
            style="height: 80px;"
          ></textarea>
        </div>
      </div>
      <!-- 确认修改 -->
      <div class="layui-form-item">
        <button class="layui-btn" @click="submit">确认修改</button>
      </div>
    </validation-observer>
  </div>
</template>

<script>
import { updateUserInfo, getInfo } from '@/api/user'
import { ValidationObserver, ValidationProvider } from 'vee-validate'
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'myinfo',
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data() {
    return {
      username: '',
      name: '',
      gender: '',
      location: '',
      regmark: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    let { username, name, gender, location, regmark } = this.userInfo
    this.username = username || ''
    this.gender = gender || ''
    this.location = location || ''
    this.name = name || ''
    this.regmark = regmark || ''
  },
  methods: {
    async getUserInfo() {
      const res = await getInfo({uid:this.userInfo._id})
      if (res.code === 200) {
        this.setUserInfo(res.data)
      }
    },
    async submit() {
      const isValid = await this.$refs.observer.validate()
      if (!isValid) {
        return
      }
      const updateRes = await updateUserInfo({
        username: this.username,
        name: this.name,
        gender: this.gender,
        location: this.location,
        regmark: this.regmark
      })
      if (updateRes.code === 501) {
        this.$alert(`${updateRes.msg}`)
      }
      if (updateRes.code === 200) {
        await this.getUserInfo()
        this.$alert('更新成功')
      }
    },
    ...mapMutations({
      setUserInfo:'SET_USER_INFO'
    })
  }
}
</script>

<style lang="scss" scoped>
.layui-icon-radio {
  color: #5fb878;
}
</style>
